.tabs {
   border-radius: 1.5rem;
   background: var(--bg-secondary);
   display: flex;
   flex-direction: column;
   gap: 1rem;
   padding: 1rem;
   box-shadow: var(--content-shadow);

   @media (max-width: 825px) {
      width: 100%;
      flex-direction: row;
      height: fit-content;
      justify-content: space-around;
      border-radius: 0;
   }

   @media (max-width: 528px) {
      & .btn__github,
      & .btn__about {
         display: none;
      }
   }

   @media (max-height: 528px) {
      & .btn__github,
      & .btn__about {
         display: none;
      }
   }
}

.btn {
   color: #474d57;
   font-size: 2rem;
   padding: 1rem;
   border-radius: 1rem;
   display: flex;
   cursor: pointer;

   & svg {
      z-index: 10;
   }

   &:hover {
      color: var(--text-primary);
   }
}

.btn__toggle {
   @extend .btn;
   color: var(--text-primary);

   @media (max-width: 825px) {
      transform: rotate(-90deg);
   }

   span {
      display: flex;
   }
}

.btn__switch {
   @extend .btn;
   position: relative;

   &.active {
      color: #fff;
   }

   span.active {
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 1rem;
      width: 100%;
      height: 100%;
      background-color: var(--bg-content-active);
   }
}

.hr {
   width: 3rem;
   align-self: center;
   border: 1px solid var(--bg-divider);
   border-radius: 5rem;

   @media (max-width: 825px), (max-height: 528px) {
      display: none;
   }

   &:last-of-type {
      margin-top: auto;
   }
}
